Frontend interview interface

React/Next.js UI for interview setup, questions, answers, and evaluation results, wired through TanStack Query.

The interview interface spans several layers:

• UI components for interview setup and question editing
• Service layer for API communication
• React Query hooks for data fetching and mutations
• Types for interview data models
• Dashboard integration for session listing and deletion

graph TB
subgraph "UI Components"
IDForm["InterviewDetailsForm.tsx"]
QEditor["QuestionsEditor.tsx"]
GAPanel["GeneratedAnswersPanel.tsx"]
end
subgraph "Hooks"
UseInterviews["use-interviews.ts"]
end
subgraph "Services"
IntSvc["interview.service.ts"]
end
subgraph "Types"
IntTypes["interview.ts"]
end
subgraph "Pages/Dashboard"
SeekerDash["seeker/page.tsx"]
DashHome["dashboard/page.tsx"]
ModalMgr["ModalManager.tsx"]
end
IDForm --> UseInterviews
QEditor --> UseInterviews
GAPanel --> UseInterviews
UseInterviews --> IntSvc
IntSvc --> IntTypes
DashHome --> ModalMgr
SeekerDash --> ModalMgr

• InterviewDetailsForm: Collects role, company, word limit, optional company knowledge, and website.
• QuestionsEditor: Manages dynamic lists of interview questions with add/remove and per-question editing.
• GeneratedAnswersPanel: Displays generated answers for submitted questions.
• use-interviews hook: Provides queries and mutations for interview sessions and answer generation.
• interview.service: Encapsulates API endpoints for interviews and answer generation.
• Types: Defines InterviewSession, QuestionAnswer, and InterviewRequest shapes.

Key capabilities:

• Form validation via controlled inputs and numeric constraints
• Real-time updates through React Query invalidations
• Accessible markup with labels and semantic inputs
• Responsive layouts using grid and flex utilities

The interview interface follows a layered architecture:

• Presentation layer: UI components manage user interactions and render state
• State layer: React hooks and TanStack Query manage data fetching, caching, and mutations
• Service layer: API client abstraction for interview endpoints
• Type layer: Strong typing for interview data structures

sequenceDiagram
participant User as "User"
participant UI as "InterviewDetailsForm"
participant Hook as "use-interviews"
participant Svc as "interview.service"
participant API as "Backend API"
User->>UI : Fill role/company/word limit
UI->>Hook : Trigger query/mutation
Hook->>Svc : Call generateAnswer(formData)
Svc->>API : POST /api/gen-answer
API-->>Svc : Answer response
Svc-->>Hook : Return data
Hook-->>UI : Update state and re-render
UI-->>User : Display generated answer

Purpose:

• Capture essential interview setup details including role, company, word limit, optional company knowledge, and website.

Implementation highlights:

• Controlled inputs bound to props-driven state
• Numeric input with min/max constraints for word limit
• Optional fields clearly marked
• Consistent styling with brand tokens and hover/focus states

Validation and UX:

• Required fields indicated with asterisks
• Real-time feedback via input handlers
• Responsive grid layout for role/company fields

Accessibility:

• Proper labels associated with inputs
• Semantic input types (text, number)
• Focus-visible states for keyboard navigation

Customization:

• Accepts external state handler to integrate with parent forms
• Reusable across different interview flows

Purpose:

• Dynamically manage a list of interview questions with add/remove actions and inline editing.

Implementation highlights:

• Dynamic list rendering with motion animations
• Per-item textarea for question text
• Add/remove controls with icons
• Scrollable content area for long lists

UX patterns:

• Smooth entry animations per item
• Immediate visual feedback on edits
• Clear affordances for adding/removing questions

Accessibility:

• Keyboard navigable list items
• Descriptive button labels with icons
• Focus management during add/remove

Purpose:

• Present generated answers to interview questions, typically after submission to the backend.

Implementation highlights:

• Card-based layout with backdrop blur and borders
• Scrollable content area for long answers
• Integration with answer generation mutation

UX patterns:

• Clean typography hierarchy
• Consistent spacing and padding
• Hover states for interactive elements

Accessibility:

• Readable text sizes and contrast
• Focusable elements for actions
• Semantic heading structure

Purpose:

• Centralize data fetching and mutations for interview sessions and answer generation.

Key exports:

• useInterviews: Fetches all interview sessions
• useDeleteInterview: Deletes a session with optimistic updates and toast notifications
• useGenerateAnswer: Submits questions and receives generated answers

State management:

• React Query manages caching, background refetching, and invalidations
• Mutation errors surfaced via toast notifications
• Success callbacks refresh dependent queries

Purpose:

• Provide typed wrappers around API endpoints for interview operations.

Endpoints:

• GET /api/interviews: Retrieve all sessions
• DELETE /api/interviews?id=: Delete a session
• POST /api/gen-answer: Submit questions and receive answers

Integration:

• Uses apiClient for HTTP requests
• Returns typed responses aligned with InterviewSession and ApiResponse

Purpose:

• Define the shape of interview data structures for type safety.

Interfaces:

• QuestionAnswer: Pair of question and answer
• InterviewSession: Complete interview session with metadata and Q&A
• InterviewRequest: Request payload for generating answers

Benefits:

• Compile-time validation of props and API responses
• Improved developer experience with autocompletion

Purpose:

• Display interview sessions, enable viewing details, and support deletion.

Key areas:

• Seeker dashboard links to hiring assistant and interview features
• Main dashboard shows interview sessions modal with loading and empty states
• Modal manager coordinates session listing, deletion confirmation, and actions

UX patterns:

• Animated modals with backdrop blur
• Loading indicators during data fetch
• Empty state guidance to start practice
• Confirmation dialogs for destructive actions

Accessibility:

• Focus trapping in modals
• Clear headings and descriptions
• Keyboard-accessible close buttons

The interview interface components depend on:

• UI primitives (Button, Card, Input, Label, Loader) for consistent styling
• Framer Motion for smooth animations
• TanStack Query for data management
• Lucide icons for visual cues
• Tailwind classes for responsive layouts

graph LR
IDForm["InterviewDetailsForm.tsx"] --> UI["UI Primitives"]
IDForm --> Motion["Framer Motion"]
IDForm --> Types["interview.ts"]
QEditor["QuestionsEditor.tsx"] --> UI
QEditor --> Motion
GAPanel["GeneratedAnswersPanel.tsx"] --> UI
UseInterviews["use-interviews.ts"] --> Query["TanStack Query"]
UseInterviews --> Toast["use-toast"]
UseInterviews --> IntSvc["interview.service.ts"]
IntSvc --> ApiClient["api-client.ts"]
IntSvc --> Types
DashSeeker["seeker/page.tsx"] --> ModalMgr["ModalManager.tsx"]
DashHome["dashboard/page.tsx"] --> ModalMgr

• Prefer controlled components to minimize unnecessary re-renders
• Use React Query’s background refetching and caching to avoid redundant network calls
• Virtualize long lists in the interview sessions modal for large datasets
• Defer heavy computations until after user input stabilizes
• Optimize animations by limiting expensive transforms and using transform properties

Common issues:

• Form submission fails silently: Ensure mutation error handling displays toasts and logs error messages
• Network errors: Verify api-client configuration and endpoint URLs
• State not updating after deletion: Confirm query invalidation for [“interviews”] and [“dashboard”] keys
• Animation glitches: Check motion variants and ensure proper cleanup on unmount

Accessibility checks:

• Verify labels are present for all inputs
• Test keyboard navigation through forms and modals
• Confirm sufficient color contrast for text and interactive elements

Responsive behavior:

• Test grid layouts on small screens; adjust breakpoints as needed
• Ensure modals are usable on mobile with appropriate touch targets
• Validate font sizes and spacing across devices